<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI秀新建委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: #f5f5f5;
            color: #333;
            min-height: 100vh;
        }

        /* 主内容区 */
        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            overflow-y: auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            position: relative;
        }

        .page-title-container {
            display: flex;
            align-items: center;
        }

        .back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3498db;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            font-size: 18px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .back-btn:hover {
            background: #2980b9;
            transform: translateX(-3px);
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .user-name {
            font-weight: bold;
        }

        /* 表单样式 */
        .form-container {
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }

        .form-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
            margin-bottom: 15px;
        }

        .form-group {
            flex: 1;
            min-width: 250px;
            padding: 0 10px;
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }

        .form-select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: white;
        }

        .form-select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }

        .radio-group {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .radio-label {
            margin-right: 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .radio-input {
            margin-right: 5px;
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
        }

        .checkbox-label {
            width: 33.33%;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .checkbox-input {
            margin-right: 5px;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .form-btn {
            padding: 10px 25px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            margin: 0 10px;
        }

        .cancel-btn {
            background: #95a5a6;
            color: white;
        }

        .cancel-btn:hover {
            background: #7f8c8d;
        }

        .submit-btn {
            background: #2ecc71;
            color: white;
        }

        .submit-btn:hover {
            background: #27ae60;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .form-group {
                min-width: 100%;
            }
            
            .checkbox-label {
                width: 50%;
            }
        }

        /* 新增扫描按钮样式 */
        .scan-btn {
            background: #17a2b8;
            color: white;
        }

        .scan-btn:hover {
            background: #138496;
        }
    </style>
</head>
<body>
    <!-- 主内容区 -->
    <div class="main-content">
        <div class="header">
            <div class="page-title-container">
                <a href="AI文书首页.html" class="back-btn">←</a>
                <div class="page-title">新建委托</div>
            </div>
            <div class="user-info">
                <div class="user-avatar">A</div>
                <div class="user-name">管理员</div>
            </div>
        </div>

        <!-- 表单内容 -->
        <form id="entrustForm">
            <!-- 个人信息 -->
            <div class="form-container">
                <div class="form-title">个人信息</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="name">姓名 <span style="color: #888; font-size: 12px;">(可直接通过扫描身份证获取信息)</span></label>
                        <input type="text" class="form-input" id="name" name="name" placeholder="请输入姓名" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="phone">电话</label>
                        <input type="tel" class="form-input" id="phone" name="phone" placeholder="请输入电话号码" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="address">地址 <span style="color: #888; font-size: 12px;">(可直接通过扫描身份证获取信息)</span></label>
                        <input type="text" class="form-input" id="address" name="address" placeholder="请输入地址">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="handler">承办人</label>
                        <input type="text" class="form-input" id="handler" name="handler" placeholder="请输入承办人姓名" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="subject">被鉴定人</label>
                        <input type="text" class="form-input" id="subject" name="subject" placeholder="请输入被鉴定人姓名" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">性别</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="gender" value="male" checked> 男
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="gender" value="female"> 女
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="idCard">身份证号 <span style="color: #888; font-size: 12px;">(可直接通过扫描身份证获取信息)</span></label>
                        <input type="text" class="form-input" id="idCard" name="idCard" placeholder="请输入身份证号码">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="age">年龄</label>
                        <input type="number" class="form-input" id="age" name="age" placeholder="请输入年龄" min="0" max="120">
                    </div>
                </div>
            </div>

            <!-- 简要案情 -->
            <div class="form-container">
                <div class="form-title">简要案情</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="caseDate">案发日期</label>
                        <input type="date" class="form-input" id="caseDate" name="caseDate">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="clientName">委托人</label>
                        <input type="text" class="form-input" id="clientName" name="clientName" readonly>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="caseBrief">简要案情描述</label>
                        <textarea class="form-input" id="caseBrief" name="caseBrief" placeholder="请输入简要案情描述" rows="4"></textarea>
                    </div>
                </div>
            </div>

            <!-- 委托鉴定事项 -->
            <div class="form-container">
                <div class="form-title">委托鉴定事项</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="caseType">案件类型</label>
                        <select class="form-select" id="caseType" name="caseType" required>
                            <option value="">请选择案件类型</option>
                            <option value="临床鉴定">临床鉴定</option>
                            <option value="死亡鉴定">死亡鉴定</option>
                            <option value="医疗损害">医疗损害</option>
                        </select>
                    </div>
                </div>
                <div class="form-row" id="entrustTypeRow" style="display: none;">
                    <div class="form-group">
                        <label class="form-label">委托类型</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="entrustType" value="法院委托" checked> 法院委托
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="entrustType" value="个人委托"> 个人委托
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">鉴定事项（可多选）</label>
                        <div class="checkbox-group" id="appraisalItems">
                            <!-- 动态加载鉴定事项 -->
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">鉴定标准（可多选）</label>
                        <div class="checkbox-group" id="appraisalStandards">
                            <!-- 动态加载鉴定标准 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他信息 -->
            <div class="form-container">
                <div class="form-title">其他信息</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="inspectionLocation">检验地点</label>
                        <input type="text" class="form-input" id="inspectionLocation" name="inspectionLocation" value="杭州鉴定所" readonly>
                    </div>
                    <div class="form-group">
                        <label class="form-label">是否重新鉴定</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="reAppraisal" value="yes"> 是
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="reAppraisal" value="no" checked> 否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">是否法律援助</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="legalAid" value="yes"> 是
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="legalAid" value="no" checked> 否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="appraisalFee">鉴定费用（元）</label>
                        <input type="number" class="form-input" id="appraisalFee" name="appraisalFee" placeholder="请输入鉴定费用" min="0" step="0.01">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">委托人是否提出鉴定旁听（观）</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="requestObserve" value="yes"> 是
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="requestObserve" value="no" checked> 否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">委托人是否提出鉴定人回退</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="requestReturn" value="yes"> 是
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="requestReturn" value="no" checked> 否
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">对方是否到场</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="opponentPresence" value="已通知未到场" checked> 已通知未到场
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="opponentPresence" value="已通知已到场"> 已通知已到场
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row" id="signatureRow" style="display: none;">
                    <div class="form-group">
                        <label class="form-label">到场是否签字</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="signatureStatus" value="已签字" checked> 已签字
                            </label>
                            <label class="radio-label">
                                <input type="radio" class="radio-input" name="signatureStatus" value="未签字"> 未签字
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="appraisalPurpose">鉴定用途</label>
                        <select class="form-select" id="appraisalPurpose" name="appraisalPurpose" required>
                            <option value="">请选择鉴定用途</option>
                            <!-- 动态加载鉴定用途 -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- 表单操作 -->
            <div class="form-actions">
                <button type="button" class="form-btn cancel-btn" id="cancelBtn">取消</button>
                <button type="button" class="form-btn scan-btn" id="scanBtn">扫描身份证</button>
                <button type="submit" class="form-btn submit-btn">提交</button>
            </div>
        </form>
    </div>

    <script>
        // 模拟数据 - 实际应用中应从配置管理中获取
        const mockData = {
            appraisalItems: {
                '临床鉴定': ['伤残等级评定', '人身损害程度评定', '医疗事故等级评定'],
                '死亡鉴定': ['死亡原因分析', '死亡方式判定', '死亡时间推断'],
                '医疗损害': ['医疗损害程度评定', '医疗过错认定', '因果关系分析']
            },
            appraisalStandards: {
                '临床鉴定': ['人体损伤程度鉴定标准', '伤残等级评定标准', '医疗事故分级标准'],
                '死亡鉴定': ['死亡原因判定标准', '法医学死亡时间推断标准'],
                '医疗损害': ['医疗损害赔偿标准', '医疗过错认定标准']
            },
            appraisalPurposes: ['司法鉴定', '保险理赔', '医疗纠纷处理', '工伤认定', '其他用途']
        };

        // DOM 元素
        const caseTypeSelect = document.getElementById('caseType');
        const appraisalItemsContainer = document.getElementById('appraisalItems');
        const appraisalStandardsContainer = document.getElementById('appraisalStandards');
        const appraisalPurposeSelect = document.getElementById('appraisalPurpose');
        const cancelBtn = document.getElementById('cancelBtn');
        const entrustForm = document.getElementById('entrustForm');
        const entrustTypeRow = document.getElementById('entrustTypeRow'); // 新增：获取委托类型行元素
        const signatureRow = document.getElementById('signatureRow'); // 新增：获取签字状态行元素

        // 加载鉴定用途
        function loadAppraisalPurposes() {
            mockData.appraisalPurposes.forEach(purpose => {
                const option = document.createElement('option');
                option.value = purpose;
                option.textContent = purpose;
                appraisalPurposeSelect.appendChild(option);
            });
        }

        // 根据案件类型加载鉴定事项
        function loadAppraisalItems(caseType) {
            appraisalItemsContainer.innerHTML = '';
            
            if (!caseType || !mockData.appraisalItems[caseType]) return;
            
            mockData.appraisalItems[caseType].forEach(item => {
                const label = document.createElement('label');
                label.className = 'checkbox-label';
                
                const input = document.createElement('input');
                input.type = 'checkbox';
                input.className = 'checkbox-input';
                input.name = 'appraisalItems';
                input.value = item;
                
                label.appendChild(input);
                label.appendChild(document.createTextNode(item));
                
                appraisalItemsContainer.appendChild(label);
            });
        }

        // 根据案件类型加载鉴定标准
        function loadAppraisalStandards(caseType) {
            appraisalStandardsContainer.innerHTML = '';
            
            if (!caseType || !mockData.appraisalStandards[caseType]) return;
            
            mockData.appraisalStandards[caseType].forEach(standard => {
                const label = document.createElement('label');
                label.className = 'checkbox-label';
                
                const input = document.createElement('input');
                input.type = 'checkbox';
                input.className = 'checkbox-input';
                input.name = 'appraisalStandards';
                input.value = standard;
                
                label.appendChild(input);
                label.appendChild(document.createTextNode(standard));
                
                appraisalStandardsContainer.appendChild(label);
            });
        }

        // 案件类型变更事件
        caseTypeSelect.addEventListener('change', function() {
            const selectedCaseType = this.value;
            loadAppraisalItems(selectedCaseType);
            loadAppraisalStandards(selectedCaseType);

            // 根据案件类型显示/隐藏委托类型字段
            if (selectedCaseType === '临床鉴定') {
                entrustTypeRow.style.display = 'flex'; // 或者 'block'，根据布局需要
            } else {
                entrustTypeRow.style.display = 'none';
            }
        });

        // 对方是否到场变更事件
        document.addEventListener('change', function(e) {
            if (e.target.name === 'opponentPresence') {
                const selectedValue = e.target.value;
                // 如果选择"已通知已到场"，显示签字状态字段
                if (selectedValue === '已通知已到场') {
                    signatureRow.style.display = 'flex';
                } else {
                    signatureRow.style.display = 'none';
                }
            }
        });

        // 取消按钮事件
        cancelBtn.addEventListener('click', function() {
            if (confirm('确定要取消填写吗？已填写的内容将不会保存。')) {
                window.location.href = 'AI文书首页.html';
            }
        });

        // 表单提交事件
        entrustForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 验证是否选择了鉴定事项
            const selectedItems = document.querySelectorAll('input[name="appraisalItems"]:checked');
            if (selectedItems.length === 0) {
                alert('请至少选择一项鉴定事项');
                return;
            }
            
            // 验证是否选择了鉴定标准
            const selectedStandards = document.querySelectorAll('input[name="appraisalStandards"]:checked');
            if (selectedStandards.length === 0) {
                alert('请至少选择一项鉴定标准');
                return;
            }
            
            // 收集表单数据
            const formData = new FormData(this);
            const formDataObj = {};
            
            formData.forEach((value, key) => {
                if (!formDataObj[key]) {
                    formDataObj[key] = [];
                }
                // 处理多选checkbox
                if (key === 'appraisalItems' || key === 'appraisalStandards') {
                    if (formDataObj[key].length === 0 && value) { // 第一次遇到多选字段
                        formDataObj[key] = formData.getAll(key);
                    } else if (!value) { // 如果没有选中的checkbox，确保字段存在但为空数组
                         formDataObj[key] = [];
                    }
                } else {
                    formDataObj[key].push(value);
                }
            });

            // 将单值字段从数组转换回单个值
            for (const key in formDataObj) {
                if (formDataObj[key].length === 1 && key !== 'appraisalItems' && key !== 'appraisalStandards') {
                    formDataObj[key] = formDataObj[key][0];
                }
            }

            // 如果委托类型不可见，则从提交数据中移除
            if (entrustTypeRow.style.display === 'none') {
                delete formDataObj.entrustType;
            }

            // 如果签字状态不可见，则从提交数据中移除
            if (signatureRow.style.display === 'none') {
                delete formDataObj.signatureStatus;
            }

            console.log('表单数据:', formDataObj);
            alert('表单已提交！请在控制台查看数据。');
            // 在实际应用中，这里会将 formDataObj 发送到服务器
            // this.reset(); // 可选：提交后重置表单
            // loadAppraisalItems(''); // 清空动态加载的选项
            // loadAppraisalStandards('');
            // entrustTypeRow.style.display = 'none'; // 隐藏委托类型
        });

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', function() {
            loadAppraisalPurposes();
        });

        // 扫描身份证按钮事件
        const scanBtn = document.getElementById('scanBtn');
        scanBtn.addEventListener('click', function() {
            // 模拟扫描身份证功能
            alert('正在启动扫描身份证功能...');
            // 实际应用中这里应该调用扫描设备的API
        });
    </script>
</body>
</html>